<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="40%">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="商品名稱:" prop="productId">
            <el-select
              v-if="!crud.status.edit"
              v-model="form.productId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remotePriductId"
              :loading="loading"
              style="width: 220px;"
            >
              <el-option
                v-for="item in product"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div v-else>{{ form.product.nameCn }}</div>
          </el-form-item>
          <el-form-item v-if="crud.status.edit" label="upc:">
            <div> {{ form.product.upc }}</div>
          </el-form-item>
          <el-form-item v-if="crud.status.edit" label="商品價格:">
            <div> {{ form.product.originalPrice }}</div>
          </el-form-item>
          <el-form-item label="活动价格" prop="promotionPrice">
            <el-input-number v-model.number="form.promotionPrice" :min="0" :max="999999" controls-position="right" style="width: 220px;" />
          </el-form-item>
          <el-form-item label="中文活动标签" prop="productLabelCn">
            <el-select
              v-model="form.labelCn"
              placeholder="请输入关键词"
              style="width: 220px;"
            >
              <el-option
                v-for="item in dict.productLabelCn"
                :key="item.id"
                :label="item.dictValue"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="英文活动标签" prop="productLabelEn">
            <el-select
              v-model="form.labelEn"
              placeholder="请输入关键词"
              style="width: 220px;"
            >
              <el-option
                v-for="item in dict.productLabelEn"
                :key="item.id"
                :label="item.dictValue"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="活动数量" prop="promotionCount">
            <el-input-number v-model.number="form.promotionCount" :min="0" :max="999999" controls-position="right" style="width: 220px;" />
          </el-form-item>
          <el-form-item label="每人限购数量" prop="promotionLimit">
            <el-input-number v-model.number="form.promotionLimit" :min="0" :max="999999" controls-position="right" style="width: 220px;" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model.number="form.sort" :min="0" :max="999999" controls-position="right" style="width: 220px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" stripe style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="" label="商品名称">
          <template slot-scope="scope">
            {{ scope.row.product.nameCn }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="商品編號">
          <template slot-scope="scope">
            {{ scope.row.product.sku }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="活动产品标签">
          <template slot-scope="scope">
            <div>{{ scope.row.labelCn }}</div>
            <div>{{ scope.row.labelEn }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="promotionCount" label="活动数量" />
        <el-table-column prop="promotionLimit" label="每人限购数量" />
        <el-table-column prop="promotionPrice" label="活动价格" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column v-if="checkPer(['admin','promotionActiveProductRelation:edit','promotionActiveProductRelation:del'])" label="操作" width="150px">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudPromotionActiveProductRelation from '@/api/sms/promotionActiveProductRelation'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { pageList } from '@/api/pms/product'
import { getOnline } from '@/api/wms/depot'
import { setTitle } from '@/utils'

const defaultForm = { id: null, promotionCount: 0, promotionLimit: 0, promotionPrice: null, sort: 0, productId: null, promotionActiveId: null, labelCn: null, labelEn: null }
export default {
  name: 'PromotionActiveProductRelation',
  components: { pagination, crudOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['productLabelCn', 'productLabelEn'],
  cruds() {
    return CRUD({ title: '活动产品关系', url: 'promotionActiveProductRelation/page', sort: 'id:desc', crudMethod: { ...crudPromotionActiveProductRelation }})
  },
  data() {
    return {
      loading: false,
      product: [],
      depotId: '',
      permission: {
        add: ['admin', 'promotionActiveProductRelation:add'],
        edit: ['admin', 'promotionActiveProductRelation:edit'],
        del: ['admin', 'promotionActiveProductRelation:del']
      },
      rules: {
        promotionCount: [
          { required: true, message: '活动数量不能为空', trigger: 'blur' }
        ],
        promotionLimit: [
          { required: true, message: '每人限购数量不能为空', trigger: 'blur' }
        ],
        promotionPrice: [
          { required: true, message: '活动价格不能为空', trigger: 'blur' }
        ]
      }}
  },
  created() {
    getOnline().then(res => {
      if (res.code === 0) {
        this.depotId = res.data.id
      }
    })
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.query.promotionActiveId = this.$route.query.id
      const title = this.$route.query.name
      setTitle('活动:' + title)
    },
    [CRUD.HOOK.afterToCU]() {
      this.form.promotionActiveId = this.$route.query.id
    },
    [CRUD.HOOK.beforeToEdit](data) {
      const formProduct = data.form.product
      this.product = [{ value: formProduct.id, label: formProduct.nameCn }]
    },
    [CRUD.HOOK.beforeValidateCU]() {
      this.product = []
    },
    remotePriductId(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          pageList({ blurry: query, size: 100, depotId: this.depotId, publishStatus: 1 }).then(res => {
            const msgs = []
            if (res.code === 0) {
              for (const i in res.data.rows) {
                const msg = res.data.rows[i]
                msgs.push({
                  value: msg.id,
                  label: msg.nameCn
                })
              }
              this.product = msgs
            }
          })
        }, 200)
      } else {
        this.product = []
      }
    }
  }
}
</script>

<style scoped>

</style>
